<template>
    <view style="padding-bottom:200rpx">
        <block v-for="(item, index) in orderInfo.detail" :key="index">
            <view class="header">
                <view class="order-number">订单编号：{{orderInfo.internal_order_sn}}</view>
                <view class="shopping">
                    <view class="shopping-img">
                        <img :src="item.spu.commodity_image_thum" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="shopping-info">
                        <view class="shopping-name">{{item.spu_name}}</view>
                        <view class="shopping-price">￥{{item.original_price}}</view>
                        <view class="shopping-text">共{{item.number}}件商品，合计￥{{item.total_price}}（含运费）</view>
                    </view>
                </view>
            </view>

            <view class="overall-evaluation">
                <view style="color:#333333;font-size:28rpx;line-height:50rpx">整体评价</view>
                <view class="star">
                    <sunui-star :defaultStar="5" :maxStar="5" :starSize='"1.3em"' @changeStar="changeAllStar(item, $event)"/>
                </view>
            </view>

            <view class="comment">
                <view class="title">
                    <view class="title-left">评论</view>
                    <!-- <view class="title-right">您还可以写140个字...</view> -->
                </view>
                <view class="text">
                    <textarea style="width:100%" placeholder="写下您的评价...." placeholder-style="color:#999999;font-size:26rpx;" auto-height="true" value="好评" @blur="textChange(item, $event)"></textarea>
                </view>
                <view class="is-upload-img">
                    <block v-for="(item1, index1) in item.imgList" :key="index1">
                        <view style="width:139rpx;height:139rpx;margin-right:20rpx" >
                            <img :src="item1" alt="" style="width:100%;height:100%">
                        </view>
                    </block>
                    <view class="upload-img" @tap="uploadImage(item)" v-if="!item.imgList || item.imgList.length < 3">
                        <img src="../../static/shangchuan.png" alt="" style="width:100%;height:100%">
                    </view>
                </view>
            </view>
            <!-- <view class="store-evaluation">
                <view class="store-evaluation-title">店铺评价</view>
                <view class="delivery-service">
                    <view style="color:#333333;font-size:26rpx;line-height:50rpx">送货服务：</view>
                    <view class="star">
                        <sunui-star :defaultStar="0" :maxStar="5" :starSize='"1.3em"' @changeStar="changeDeliverStar"/>
                    </view>
                </view>
                <view class="service-attitude">
                    <view style="color:#333333;font-size:26rpx;line-height:50rpx">服务态度：</view>
                    <view class="star">
                        <sunui-star :defaultStar="0" :maxStar="5" :starSize='"1.3em"' @changeStar="changSerivereStar"/> 
                    </view>
                </view>
            </view> -->
        </block>
        <view class="bottom">
            <view class="button" @tap="submitCommont">立即提交</view>
        </view>
    </view>
</template>

<script>
import sunuiStar from '../../components/sunui-star/sunui-star'
import { OrderModel } from '../../model/order'
const orderModel = new OrderModel()
export default {
    components: {
        sunuiStar
    },
    data() {
        return {
            orderInfo: [],
            curStar: 0,
            commidtyInfo: [],
            commentInfo: [],
            imgList: [],
            currentId: 0
        }
    },
    methods: {
        // 整体星级
        changeAllStar(item, e) {
            item.curStar = e.curStar
        },
        // 文本框输入值
        textChange(item, e) {
            console.log(e)
            item.contentLength = e.detail.cursor
            item.comment = e.detail.value
        },
        // 送货服务星级
        // changeDeliverStar(e) {
        //     console.log(e)
        // },
        // 服务态度星级
        // changSerivereStar(e) {
        //     console.log(e)
        // },
        // 上传图片
        uploadImage(value) {
            // if(this.currentId != value.id) {
            //     this.imgList = []
            // }
            let that = this
            uni.chooseImage({
                count: 3, //默认9
                sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                success: function (res) {
                    that.currentId = value.id
                    if(res.errMsg == "chooseImage:ok") {
                        res.tempFilePaths.forEach((item) => {
                            uni.uploadFile({
                                url: getApp().globalData.api_base_url + '/upload',
                                filePath: item,
                                name: 'img',
                                formData: {
                                    type: 'comment'
                                },
                                success: (uploadFileRes) => {
                                    console.log(JSON.parse(uploadFileRes.data))
                                    // value.imgList.push(JSON.parse(uploadFileRes.data).data.url)
                                    if(!value.imgList) {
                                        let imgList = new Array()
                                        imgList.push(JSON.parse(uploadFileRes.data).data.url)
                                        that.$set(value, 'imgList', imgList)
                                    }else {
                                        value.imgList.push(JSON.parse(uploadFileRes.data).data.url)
                                    }
                                }
                            })
                        })
                        // value.imgList = that.imgList
                        console.log(value)
                    }
                }
            })
        },
        // 提交评论信息
        submitCommont() {
            console.log(this.orderInfo)
            this.commentInfo = []
            this.orderInfo.detail.forEach((item) => {
                let comments = {
                    order_detail_id: item.id,
                    content: item.comment ? item.comment : '好评',
                    fraction: item.curStar ? item.curStar : '5',
                    spu_id: item.spu_id,
                    sku_id: item.sku_id,
                    images: item.imgList ? item.imgList : ''
                }
                this.commentInfo.push(comments)
            })
            let data = {
                order_id: this.orderInfo.id,
                comments: JSON.stringify(this.commentInfo)
            }
            orderModel.commentOrder(data).then((res) => {
                if(res.code == 200) {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        }
    },
    watch: {
        
    },
    onLoad(option) {
        console.log(JSON.parse(option.commont))
        this.orderInfo = JSON.parse(option.commont)
    }
}
</script>

<style>
    .sunui-m {
        width: 100% !important;
    }
    .sunui-stars-items {
        margin-right: 40rpx;
    }
    .header {
        background: #ffffff;
        margin-top: 20rpx;
    }
    .order-number {
        color: #333333;
        font-size: 24rpx;
        font-weight: 500;
        padding: 15rpx 0 30rpx 58rpx;
    }
    .shopping {
        padding: 0rpx 0 20rpx 58rpx;
        display: flex;
        justify-content: left;
    }
    .shopping-img {
        width: 139rpx;
        height: 139rpx;
    }
    .shopping-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 23rpx;
    }
    .shopping-name {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .shopping-price {
        color: #FF1E1E;
        font-size: 30rpx;
    }
    .shopping-text {
        color: #999999;
        font-size: 24rpx;
    }
    .overall-evaluation {
        height: 50rpx;
        background: #ffffff;
        margin-top: 20rpx;
        padding: 28rpx 0 28rpx 50rpx;
        display: flex;
        justify-content: left;
    }
    .star {
        display: flex;
        justify-content: space-between;
        margin-left: 34rpx;
    }
    .star-item {
        width: 39rpx;
        height: 37rpx;
        margin-right: 40rpx;
    }
    .comment {
        padding: 28rpx 36rpx 12rpx 46rpx;
        margin-top: 20rpx;
        background: #ffffff;
    }
    .title {
        display: flex;
        justify-content: space-between;
    }
    .title-left {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .title-right {
        color: #999999;
        font-size: 24rpx;
    }
    .text {
        margin-top: 40rpx;
    }
    .upload-img {
        width: 139rpx;
        height: 139rpx;
        background:rgba(245,245,245,1);
        border-radius: 10rpx;
    }
    .is-upload-img {
        display: flex;
        justify-content: left;
        border-radius: 10rpx;
        margin-top: 60rpx;
    }
    .store-evaluation {
        margin-top: 20rpx;
        padding: 21rpx 0 43rpx 46rpx;
        background: #ffffff;
    }
    .store-evaluation-title {
        color: #333333;
        font-size: 28rpx;
    }
    .delivery-service {
        display: flex;
        justify-content: left;
        margin-top: 46rpx;
    }
    .service-attitude {
        display: flex;
        justify-content: left;
        margin-top: 33rpx;
    }
    .bottom {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 140rpx;
        background: #ffffff;
    }
    .button {
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        margin: 28rpx auto 0;
        font-size: 30rpx;
        font-weight: bold;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 84rpx;
    }
</style>